<template>
	<view class="settlement">
		<view v-show="!ifAllShopChoosed">
			<view class="choosed" @click="chooseAllShop" :class="ifLock">
				<image class="image" src="../../../static/img/cart/unchoosed.svg" alt="" />
				全选
			</view>
		</view>
		<view v-show="ifAllShopChoosed">
			<view class="choosed" :class="ifLock" @click="unChooseAllShop">
				<image class="image" src="../../../static/img/cart/choosed.svg" alt="" />
				全选
			</view>
		</view>


		<view v-if="isEditing">
			<view class="feature-btn">
				<view class="btn" @click="collect" v-if="isLogin">
					<span>加入收藏</span>
				</view>
				<view class="btn" @click="remove"><span>删除</span></view>
			</view>
		</view>

		<view v-else class="price-check">
			<text class="text" >总计:¥{{ formatPrice }}</text>
			<span class="checkstand" :class="ifCanCheck" @click="check">去结算({{ countHint }})件</span>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapState
	} from "vuex";

	export default {
		data() {
			return {
				isEditing: false,
			};
		},
		props: {
			editing: {
				type: Boolean,
				default () {
					return false;
				},
			},
		},
		deactivated() {
			this.isEditing = false;
		},
		watch: {
			editing(newV) {
				this.isEditing = newV;
			},
		},
		computed: {
			...mapGetters(["ifAllShopChoosed", "reCount"]),
			...mapState(["shopNum", "totalPrice", "isLogin"]),

			//是否锁定按钮
			ifLock() {
				return this.shopNum > 0 ? "" : "lock";
			},

			//格式化价格
			formatPrice() {
				return this.totalPrice.toFixed(2);
			},

			//依据已选商品件数切换样式
			ifCanCheck() {
				return this.reCount > 0 ? "checked" : "check-lock";
			},

			countHint() {
				return this.reCount >= 99 ? 99 + "+" : this.reCount;
			},
		},
		methods: {
			...mapMutations([
				"chooseAllShop",
				"unChooseAllShop",
				"deleteChosenGood", //删除所选商品
				"collectChosenGood", //收藏所选商品
				"uncollectChosenGood", //取消收藏所选商品
			]),
			collect() {
				this.collectChosenGood();
				this.success("收藏成功");
			},
			remove() {

				uni.showModal({
					title: "提示",
					content: `确认删除?`,
					showCancel: true,
					confirmText: "确定",
					success: async (res) => {
						if (res.confirm) {
							this.deleteChosenGood();
							this.success("删除成功");
						} else {
							this.info('已取消')
						}
					},
				})


			},
			check() {
				// $router.push('/cart/confirm/0')
				uni.navigateTo({
					url: "/pages/cart/pay/ConfirmOrder?tag=0"
				})
			}
		},
	};
</script>
<style lang="scss" scoped>
	.settlement {
		height: 100rpx;
		box-sizing: border-box;
		width: 100vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		padding-left: 4vw;
		padding-right: 3vw;
		position: fixed;
		/* #ifdef H5 */
		bottom: $tabbar-height;
		/* #endif */
		/* #ifdef MP || APP */
		bottom: 0;
		/* #endif */
		background-color: rgba(255, 255, 255, 0.95);


		.text {
			display: block;
		}

		.choosed {
			display: flex;
			align-items: center;
			/* #ifdef H5 */
			gap: 4rpx;
			/* #endif */
		}

		.choosed > .image {
			height: 42rpx;
			width: 40rpx;
		}

		.feature-btn {
			display: flex;


			.btn {
				background-color: white;
				border: 2rpx solid rgb(224, 224, 224);
				border-radius: 30rpx;
				text-align: center;
				margin: 0 20rpx;
				padding: 0 1vh;
				height: 76rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.price-check {
			display: flex;
			justify-content: space-around;
			align-items: center;
			/* #ifdef H5 */
			gap: 20rpx;
			/* #endif */
			font-weight: 600;

			.checkstand {
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 56rpx;
				height: 78rpx;
				margin: 0px 6rpx;
				width: 200rpx;
			}

			.checked {
				background-color: #f4200c;
				pointer-events: all;
				cursor: pointer;
			}

			.check-lock {
				background-color: #f57469;
				pointer-events: none;
				cursor: pointer;
			}
		}

		.lock {
			pointer-events: none;
			cursor: pointer;
		}
	}
</style>
